<template>
  <div class="book">
    <!-- logo -->
    <h1 class="logo">小拾光</h1>
    <!-- 登录 -->
    <h3>注册</h3>
    <!-- 表单 -->
    <form class="form">
      <!-- 用户名 -->
      <label>
        <span>名&emsp;字：</span><input type="text" name="username" v-model="regPrams.username" />
      </label>
      <!-- 密码 -->
      <label>
        <span>密&emsp;码：</span><input type="password" name="password" v-model="regPrams.password" />
      </label>
      <label>
        <span>验证码：</span><input type="text" name="code" v-model="regPrams.captcha" autocomplete="off" />
        <div class="codeAndMsg">
          <div class="msg">{{ msg }}</div>
          <div class="code">
            <img src="http://10.50.212.208:8080/generateCaptcha" alt="验证码加载失败" @click="refreshCaptcha" ref="code">
            <div class="refresh">点击图片刷新验证码</div>
          </div>
        </div>
      </label>
    </form>
    <div class="back" @click="changePage(1); deleteOld()">
      返回登录
    </div>
    <!-- 注册按钮 -->
    <div class="login" @click="reg">注册</div>
    <transition enter-active-class="animate__animated animate__fadeInDown">
      <popAlert v-show="popShow">
        <template #body>
          <div>
            注册成功! <br>
            (3秒后跳转至登录)
          </div>
        </template>
        <template #footer>
          <button class="backBtn" @click="changePage(1); deleteOld()">返回登录</button>
        </template>
      </popAlert>
    </transition>
  </div>

</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import popAlert from '@/components/popAlert.vue';
import { reqGetCode, reqUserReg } from '@/apis/user';
import ModelDialog from '@/components/ModelDialog.vue';
const emit = defineEmits(['updatePage'])
let popShow = ref(false)
let code = ref()
let msg = ref('')

// 注册参数
const regPrams = reactive({
  username: '',
  password: '',
  captcha: ''
})

// 切换页面
const changePage = (page) => {
  emit('updatePage', page);
}

// 获取验证码
const refreshCaptcha = () => {
  code.value.src = 'http://10.50.212.208:8080/generateCaptcha?time=' + new Date().getTime();
}

// 注册
const reg = async () => {
  // alert('注册成功')
  if (regPrams.username == '' || regPrams.password == '' || regPrams.captcha == '') {
    msg.value = '请输入完整信息'
  } else {
    let result = await reqUserReg(regPrams)
    if (result.code == "200") {
      popShow.value = true
      setTimeout(() => {
        changePage(1)
        deleteOld()
      }, 3000);
    } else {
      msg.value = result.message
    }
  }
}

// 删除旧信息
const deleteOld = () => {
  regPrams.username = ''
  regPrams.password = ''
  regPrams.captcha = ''
  popShow.value = false
}
</script>

<style lang="scss" scoped>
.book {
  box-shadow: -0.0833rem .05rem .0667rem rgba(0, 0, 0, 0.25);
  background-color: #B0A272;
  border-radius: .1667rem .0333rem .0333rem .1667rem;
  width: 8.1667rem;
  height: 12rem;

  // logo
  .logo {
    float: right;
    background: url('@/assets/logo.png') no-repeat;
    background-size: contain;
    width: 3.3333rem;
    height: 2rem;
    font-size: 0;
  }

  // 登录
  h3 {
    margin-top: 2rem;
    font-size: .6rem;
    text-align: center;
  }

  // 表单
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;

    // 表单项
    label {
      display: block;
      margin-top: .5rem;
      font-size: .6rem;

      input {
        background: none;
        border: none;
        border-bottom: #000 .0167rem solid;
        width: 3.3333rem;
      }

      span {
        display: inline-block;
        width: 4em;
      }

      .codeAndMsg {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .msg {
          font-size: .4rem;
          font-weight: bold;
          color: #DC143C;
        }

        .code {
          margin-top: .3333rem;
          font-size: .2333rem;
          line-height: 1.5;
          text-align: center;
          cursor: pointer;

          img {
            background-color: #fff;
          }

          .refresh {
            font-size: .2667rem;
            line-height: 1;
          }
        }
      }
    }
  }

  .back {
    margin-top: .3333rem;
    font-size: .3333rem;
    text-align: center;
    color: rgba(101, 67, 33, 1);
    cursor: pointer;
  }

  // 登录按钮
  .login {
    background: rgba(247, 188, 111, 1);
    border-radius: .1667rem;
    margin: .4rem auto 0;
    width: 3.3333rem;
    height: .8333rem;
    font-size: .6rem;
    text-align: center;
    line-height: .8333rem;
    cursor: pointer;
    transition: all .5s ease-in-out;
  }

  .login:hover {
    background-color: #ffebaf;
  }
}

.backBtn {
  background-color: $success-color;
  border: none;
  color: #fff;
  cursor: pointer;
}
</style>